<template>
  <div :class="{'upload-wrapper': !isImgclass}">
    <img v-if="imgSrc != ''" :src="imgSrc | _ImgPrefix" alt="图片出错" width="100%" :class="{'imgClass': isImgclass}"/>
    <a-upload
      list-type="picture-card"
      class="avatar-uploader"
      :disabled="disabled || imgSrc != ''"
      :show-file-list="false"
      :before-upload="onBeforeUpload"
      :custom-request="DoUpload"
      v-else
    >
      <div>上传</div>
    </a-upload>
    <div class="remark-box" v-if="imgSrc == ''">
      <!--      <p class="title" v-if="guige">上传图片规格：</p>-->
      <!--      <p class="sub-text">{{ remark }} </p>-->
    </div>
    <div class="remark-box" v-else>
      <a-upload
        :disabled="disabled"
        :show-file-list="false"
        :before-upload="onBeforeUpload"
        :custom-request="DoUpload"
      >
        <p style="color: #1890ff;margin-left: 10px" v-if="!disabled">重新上传</p>
      </a-upload>
    </div>
  </div>
</template>
<script>
import { Message } from '@arco-design/web-vue'
import uploadFileMixins from '@/mixins/uploadFileMixins'
// import { typeMap } from '@/common/constant'

export default {
  name: 'UploadImage',
  mixins: [uploadFileMixins],
  props: {
    isImgclass: { // 样式
      type: Boolean,
      default: false
    },
    single: {
      type: Boolean,
      default: true
    },
    guige: { // 是否显示规格
      type: Boolean,
      default: true
    },
    remark: { // 是否显示注释
      type: String,
      default: '不大于500Kb的正方形图片，支持格式JPG,PNG,BMP'
    },
    num: { // 产品页面需要判断是上传哪个图
      type: String,
      default: ''
    },
    value: {
      type: String,
      default: ''
    },
    size: {
      type: [Number, String],
      default: 5000
    },
    params: {
      type: Object,
      default: function () {
        return {
          type: 'image'
        }
      }
    },
    disabled: {
      type: Boolean,
      default: false
    }
  },
  data () {
    const value = this.value || ''
    return {
      loading: false,
      imgSrc: value,
      file: null
    }
  },
  watch: {
    value: {
      handler (val) {
        this.imgSrc = val || ''
      },
      immediate: true
    }
  },
  methods: {
    // 格式与大小校验
    beforeUploadFile (file) {
      const isImg = file.type === 'image/jpeg' || file.type === 'image/png' || file.type === 'image/bmp'
      if (!isImg) {
        Message.info('图片格式不支持')
      }
      const isLt = file.size / 1024 < this.size
      if (!isLt) {
        Message.info(`图片大小超过${this.size}K`)
      }
      return isImg && isLt
    },
    onBeforeUpload (file) {
      this.file = file
      return this.beforeUploadFile(file)
    },
    async DoUpload (option) {
      const { single } = this
      try {
        this.loading = true
        const result = await this.uploadClientFile(option.file)
        console.log(single, result)
        if (single) {
          this.imgSrc = result.url || ''
        } else {
          this.file = null
        }
        this.$emit('ok', result, this.num)
      } catch (error) {
        console.log('/file/upload:', error)
      } finally {
        this.loading = false
      }
    }
  }
}
</script>
<style lang="less" scoped>
  .upload-wrapper{
    height: 128px;
    display: flex;
    align-items: center;
    img{
      width: 100px;
      height: 100px;
      background-size: 100% 100%;
    }
  }
  .upload-wrapper .remark-box{
    width: auto;
    font-size: 12px;
    color: #999;
  }
  .upload-wrapper .remark-box p{
    margin: 0;
    line-height: 2;
  }
  .pre-image-box {
    width: 128px;
    height: 128px;
    border-radius: 2px;
    box-sizing: border-box;
    overflow: hidden;
  }
  .avatar-uploader {
    width: 128px;
    height: 128px;
  }
  .avatar-uploader :deep(img) {
    height: 104px;
    object-fit: contain;
  }
  .imgClass{
    width: 260px!important;
    height: auto!important;
    //object-fit: cover
  }
</style>
